<script setup>
import {ref} from "vue";
const sTop = ref(-30);
const sTopTip = ref("下拉刷新");
const listBox = ref();

const emits = defineEmits(["reload", "loadmore"])

function down(downEve){

    downEve.preventDefault();

    // 存储鼠标移动时的Y坐标，用于判断移动的方向
    let moveTop = 0;

    document.onmousemove = function(eve){
    // 判断本次移动的坐标是否小于上次移动的坐标，向上移动，不触发该功能
    if(eve.pageY <= moveTop) return;
        // 每次移动后，都要将当前坐标存储起来，以备下次判断
        moveTop = eve.pageY;
        // 计算鼠标移动的记录
        const t = eve.pageY - listBox.value.offsetTop - listBox.value.parentNode.offsetTop - downEve.offsetY - downEve.target.offsetTop;
        // 根据鼠标移动的距离，改变提示语的位置
        sTop.value = -30 + t;
        // 当提示语完全显示后，提示可以松手刷新了
        if(sTop.value >= 0){
            sTop.value = 0;
            sTopTip.value = "松手刷新";
        }
    }
    document.onmouseup = function(){
        // 清除移动
        document.onmousemove = null;
        // 下拉到上限值，松手后重新请求数据表示刷新
        if( sTop.value >= 0 ){
            // 修改提示语
            sTopTip.value = "正在刷新";
            // 触发外部的刷新数据功能
            emits("reload", ()=>{
                // 修改刷新数据的状态
                sTopTip.value = "下拉刷新";
                sTop.value = -30;
            });
        }else{
            // 未下拉到上限值，松手，提示语还原，不刷新
            sTop.value = -30;
            sTopTip.value = "下拉刷新";
        }
    }
}

// 记录是否正在加载数据，初始没有加载
const isLoading = ref(false);

function load(){
    // 获取各种尺寸，用于计算是否到底部
    const sH = listBox.value.scrollHeight;
    const cH = listBox.value.clientHeight;
    let sT = listBox.value.scrollTop;
    // 是否到底部，且默认没有正在加载数据
    if(sH - cH <= sT + 10 && !isLoading.value){
        // 正在加载数据
        isLoading.value = true;
        // 触发外部的加载数据功能
        emits("loadmore", ()=>{
            // 修改正在加载数据的状态：未正在加载
            isLoading.value = false
        })
    }
}
</script>

<template>
    <div class="listBox" ref="listBox" @mousedown="down" @scroll="load">
        <p class="topTip" :style="{marginTop: sTop+'px'}">
            {{ sTopTip }}
        </p>
        <slot></slot>
        <p class="bottomTip" v-show="isLoading">
            正在加载新数据
        </p>
    </div>
</template>

<style>
.listBox{
  height:200px;
  border:solid 1px black;
  overflow: auto;
  background: #ccc;
}
.listBox .topTip{
  height:30px;
  line-height:30px;
}
</style>